<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"  />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="templates/mobile/style/cp_style20140312.css" />
<!--{~ui('loader')->js('@jquery')}-->
<title>{echo ($this->Title != '') ? $this->Title.' - ' : (ini('cplace.cnpre.enabled') ? (logic('misc')->City('name').ini('settings.tuangou_str').' - ') : '')}{ini:settings.site_name}{conf page_title}</title>
<style>
body{
	font-family: "微软雅黑";
font-size: 12px;
}
p a {
color: #0088cc;
text-decoration: none;
}
header {
height: 50px;
display: block;
text-align: center;
background: #E4393C;
border-bottom: 1px #980063 solid;
background: -moz-linear-gradient(top,#E4393C,#E4393C);
background: -webkit-gradient(linear,0 0,0 100%,from(#E4393C),to(#E4393C));
}
.arrow-left {
float: left;
width: 13px;
height: 13px;
margin-left: 13px;
margin-top: 15px;
border: 2px solid #fff;
border-width: 2px 0 0 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.arrow-left:hover{
	background:none;
	float: left;
width: 13px;
height: 13px;
margin-left: 13px;
margin-top: 15px;
border: 2px solid #ff5a84;
border-width: 2px 0 0 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.w-header .home {
float: right;
width: 37px;
height: 100%;
background: url(templates/mobile/images/home.png) no-repeat center;
background-size: 21px;
}

.w-header .text {
margin: 0 100px;
text-align: center;
line-height: 50px;
font-size: 18px;
color: #fff;
font-family: 'MICROSOFT YaHei', Helvetica, Tahoma, sans-serif;
}
.detail_cen img{
	max-width:300px;
	height:auto;
}
#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
	.over {

            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            opacity:0.5;
            z-index: 1000;
        }

        .layout {
            position: absolute;
            top: 40%;
            left: 40%;
            width: 20%;
            height: 20%;
            z-index: 1001;
            text-align:center;
        }
</style>
</head>

<body id="deal">
<header class="w-header">
     <a class="arrow-left" href="javascript:history.back()"></a>
                 
					
                    <a href="/wap.php" class="home" ></a>
                    <div class="text">便民修车</div>

</header>


<div class="content">
	
	 <div id="over" class="over"></div>
    <div id="layout" class="layout"><img src="http://images.cnblogs.com/cnblogs_com/qiuyan/477435/o_31.gif" /><br/>&nbsp;&nbsp;加载中...</div>
	
    <div id="mapBox" >
		<div id="allmap" ></div>
        
    </div>
 </div>  
       
  <script src="http://api.map.baidu.com/api?v=2.0&ak=ulGPujr1aHbOSi6okoBhkLzR" type="text/javascript"></script>

        <script type="text/javascript" >
		var map = new BMap.Map("allmap"); 
 
var gc = new BMap.Geocoder();  
var geolocation = new BMap.Geolocation();
var pt;
var lacation ;
var points      = [];  //存储检索出来的结果的坐标数组
var bounds;
var myIcon = new BMap.Icon("static/images/0.png", new BMap.Size(25,50)); 
!function(){ //初始化地图模块相关代码
    map.enableScrollWheelZoom();                            // 启用滚轮放大缩小 
	map.enableDragging();
	//map.enableContinuousZoom();                             // 启用地图惯性拖拽，默认禁用 map.enableInertialDragging();                           // 启用连续缩放效果，默认禁用。 
	//map.addControl(new BMap.NavigationControl());           // 添加平移缩放控件
    //map.addControl(new BMap.ScaleControl());                // 添加比例尺控件
   //map.addControl(new BMap.OverviewMapControl());          // 添加缩略地图控件
    //map.addControl(new BMap.MapTypeControl());              // 添加地图类型控件
	geolocation.getCurrentPosition(function(r){
	if(this.getStatus() == BMAP_STATUS_SUCCESS){
	
		pt = r.point;
		lacation = pt.lng+","+pt.lat;
		map.centerAndZoom(pt, 14); 
		document.getElementById("over").style.display = "none";
		document.getElementById("layout").style.display = "none";
		 bounds = map.getBounds();
		var sw = bounds.getSouthWest().lng+","+bounds.getSouthWest().lat;
		var ne = bounds.getNorthEast().lng+","+bounds.getNorthEast().lat;
		var boundStr = sw+";"+ne;
		var url = "http://api.map.baidu.com/geosearch/v3/bound?callback=?";
        $.getJSON(url, {
            'q'          : '', //检索关键字
			'bounds'     : boundStr,
 			'page_size'  : 20,
            'geotable_id': 68180,
            'ak'         : 'ulGPujr1aHbOSi6okoBhkLzR'  //用户ak
        },function(e) {
            //renderList(e, page + 1);
            renderMap(e);
        }); 
		
	}
	else {
		ipGeo();
		
	}        
},{enableHighAccuracy: true,timeout:5000,maximumAge:30000});   
setTimeout(function(){
		if(typeof(geolocation.getStatus())=='undefined'){
			ipGeo();
		}
		 
		 
		},6000);	
   map.addEventListener("dragend", resetCenter);
    map.addEventListener("zoomend", resetCenter);		
}();


var Util = {
    
    /**
     * 设置Map容器的高度
     */
    setMapHeight: function() {
        //var mapBoxHeight = $(window).height()  - $('#pageHeader').height() - $('#pageMiddle').height() - 38;
		var mapBoxHeight = $(window).height()  - $('#pageHeader').height() - 38;
        $('#mapBox').css({height: mapBoxHeight + 'px'});
    },
   
}


function ipGeo(){
	{if ~logic('misc')->City('name')}
	map.centerAndZoom("新乡",14);  
	
	document.getElementById("over").style.display = "none";
	document.getElementById("layout").style.display = "none";
	bounds = map.getBounds();
	var sw = bounds.getSouthWest().lng+","+bounds.getSouthWest().lat;
	var ne = bounds.getNorthEast().lng+","+bounds.getNorthEast().lat;
	var boundStr = sw+";"+ne;
	var url = "http://api.map.baidu.com/geosearch/v3/bound?callback=?";
	$.getJSON(url, {
		'q'          : '', //检索关键字
		'bounds'       : boundStr,
		'page_size'  : 20,
		'geotable_id': 68180,
		'ak'         : 'ulGPujr1aHbOSi6okoBhkLzR'  //用户ak
	},function(e) {
		//renderList(e, page + 1);
		renderMap(e);
	}); 
	{else}
	 $.getJSON("http://api.map.baidu.com/location/ip?callback=?",{ak:'ulGPujr1aHbOSi6okoBhkLzR',coor:'bd09ll'},function(json){
			//var point  = new BMap.Point(json.content.point.x,json.content.point.y);
			pt = new BMap.Point(json.content.point.x, json.content.point.y);
			lacation = pt.lng+","+pt.lat;
			map.centerAndZoom(pt, 14); 
			document.getElementById("over").style.display = "none";
			document.getElementById("layout").style.display = "none";
			bounds = map.getBounds();
			var sw = bounds.getSouthWest().lng+","+bounds.getSouthWest().lat;
			var ne = bounds.getNorthEast().lng+","+bounds.getNorthEast().lat;
			var boundStr = sw+";"+ne;
			var url = "http://api.map.baidu.com/geosearch/v3/bound?callback=?";
			$.getJSON(url, {
				'q'          : '', //检索关键字
				'bounds'       : boundStr,
				'page_size'  : 20,
				'geotable_id': 68180,
				'ak'         : 'ulGPujr1aHbOSi6okoBhkLzR'  //用户ak
			},function(e) {
				//renderList(e, page + 1);
				renderMap(e);
			}); 
		}); 
	
	{/if}
		
		
}




/**
     * 渲染地图模式
     * @param result
     *
     */
function renderMap(res) {
	
	var content = res.contents;
	map.clearOverlays();
	points.length = 0;

   
	$.each(content, function(i, item){
		var point = new BMap.Point(item.location[0], item.location[1]),
			marker = new BMap.Marker(point,{icon:myIcon});
			
		points.push(point);
		/* var tr = $("<tr><td width='100%'><a href='" + item.url + "' target='_blank' onclick=''>" + item.title + "<a/><br/>地址:" + item.address + "<br/>电话:" + item.phone + "</td></tr>").click(showInfo);
		$('#mapList').append(tr);; */
		marker.addEventListener('click', showInfo);
		function showInfo() {
			var content = "<img id='imgDemo' src='" + item.pic + "' style='width:111px;height:83px;float:left;margin-right:5px;'/>" +
						  "<p>名称：" + item.title + "</p>" +
						  "<p>地址：" + item.address + "</p>" +
						  "<p>电话：<a href='tel://" + getNum(item.phone) + " '>" + item.phone + "</a> (点击直接拨打)</p>";
						  
			//创建检索信息窗口对象
			var infoWindow = new BMap.InfoWindow(content,{title  : item.title, width  : 290});
			marker.openInfoWindow(infoWindow);
			//document.getElementById('imgDemo').onload = function (){
				//infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
			//}
			/*var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
				title  : item.title,       //标题
				width  : 290,             //宽度
				panel  : "panel",         //检索结果面板
				enableAutoPan : true,     //自动平移
				searchTypes   :[
					BMAPLIB_TAB_SEARCH,   //周边检索
					BMAPLIB_TAB_TO_HERE,  //到这里去
					BMAPLIB_TAB_FROM_HERE //从这里出发
				]
			});
			searchInfoWindow.open(marker);*/

			
		};
		map.addOverlay(marker);
	});


	//map.setViewport(points);
};


/**
     * 拖拽地图后重新计算
     *
     * 
     */
function resetCenter(){
	bounds = map.getBounds();
	var sw = bounds.getSouthWest().lng+","+bounds.getSouthWest().lat;
	var ne = bounds.getNorthEast().lng+","+bounds.getNorthEast().lat;
	var boundStr = sw+";"+ne;
	var url = "http://api.map.baidu.com/geosearch/v3/bound?callback=?";
	$.getJSON(url, {
		'q'          : '', //检索关键字
		'bounds'       : boundStr,
		'geotable_id': 68180,
		'page_size'  : 20,
		'ak'         : 'ulGPujr1aHbOSi6okoBhkLzR'  //用户ak
	},function(e) {
		//renderList(e, page + 1);
		renderMap(e);
	}); 
}

function getNum(text){
	var value = text.replace(/[^0-9]/ig,""); 
	return value;
}	 
	 
	 
$(document).ready(function(){
    Util.setMapHeight();
});
		</script>     

</body>
</html>
